<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description"
	content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords"
	content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author"
	content="Sergey Pimenov and Metro UI CSS contributors">

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<title>合同</title>

<link href="${pageContext.request.contextPath }/css/metro.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-icons.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/css/metro-responsive.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery-2.1.3.min.js"></script>
<script
	src="${pageContext.request.contextPath }/js/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath }/js/metro.js"></script>
<style type="text/css">
<!--
.exampl {
	width: 840px;
	height: 550px;
	padding: .625rem 1.825rem .625rem 2.5rem;
	border: 1px #ccc dashed;
	position: relative;
	margin: 0 0 .625rem 0;
	background-color: #ffffff;
}

.exampl:before,.example:after {
	display: table;
	content: "";
}

.exampl:after {
	clear: both;
}

.exampl:before {
	position: absolute;
	content: attr(data-text);
	text-transform: lowercase;
	left: 1.5rem;
	top: 11.875rem;
	color: gray;
	display: block;
	font-size: 1rem;
	line-height: 1rem;
	height: 1rem;
	text-align: right;
	white-space: nowrap;
	direction: ltr;
	width: 12.5rem;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
</style>
</head>
<body>

	<div class="exampl">
		<table class="table border bordered hovered cell-hovered">
			<thead>
				<tr>
					<th>序号</th>
					<th>合同起始日期</th>
					<th>合同终止日期</th>
					<th>合同类型</th>
					<th>合同期限（月）</th>
					<th>部门意见</th>
					<th>合同标识</th>
					<th>合同办理日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr class="error">
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr class="warning">
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr class="info">
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
				<tr class="success">
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
			</tbody>
		</table>
	</div>



</body>
</html>